<template>
  <div>
    <h2>我的预约</h2>
    <template>
      <el-table :data="tableData" stripe style="width: 100%">
        filter
        <el-table-column prop="oid" label="订单编号"> </el-table-column>
        <el-table-column prop="cid" label="预约车型" width="130">
        </el-table-column>
        <el-table-column prop="name" label="预约人"> </el-table-column>
        <el-table-column prop="tel" label="预约手机号" width="130">
        </el-table-column>
        <el-table-column prop="time" label="预约时间" width="180">
        </el-table-column>
        <el-table-column prop="store_add" label="预约地址" width="250">
        </el-table-column>
        <el-table-column prop="order_status" label="预约状态">
        </el-table-column>

        <el-table-column label="操作" type="index">
          <!-- 添加一个row的插槽 -->
          <template slot-scope="scope">
            <!-- <el-rate v-model="value" :colors="colors"></el-rate> -->
            <el-tooltip
              content="点击确认完成订单"
              placement="top"
              effect="light"
            >
              <el-button
                type="success"
                icon="el-icon-check"
                size="mini"
                circle
                @click="goFinish(scope.$index)"
              ></el-button> </el-tooltip
          ></template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      tableData: [],
      data2: null,
      phone: "",
      form: {
        cid: "",
        store_add: "",
        time: "",
        name: "",
        tel: "",
        order_status: "",
        oid: "",
      },
      obj: {},
    };
  },
  mounted() {
    this.save();
    this.orders();
  },
  methods: {
    save() {
      this.phone = sessionStorage.getItem("phone");
    },
    orders() {
      this.axios.get(`/log?phone=${this.phone}`).then((res) => {
        this.data2 = res.data.data;
        let data = JSON.parse(JSON.stringify(res.data.data));
        for (var i = 0; i < data.length; i++) {
          data[i].store_add = data[i].customer_add + data[i].store_add;
          data[i].oid = 10000 + data[i].oid;
          data[i].time = this.moment
            .unix(data[i].time / 1000)
            .format("YYYY/MM/DD HH:mm:ss");
          if (data[i].cid == 1) {
            data[i].cid = "海豹-精英型";
          }
          if (data[i].cid == 2) {
            data[i].cid = "海豹-尊贵型";
          }
          if (data[i].cid == 3) {
            data[i].cid = "海豹-后驱版";
          }
          if (data[i].cid == 4) {
            data[i].cid = "海豹-四驱性能版";
          }
          if (data[i].cid == 5) {
            data[i].cid = "汉DM-i-尊贵型";
          }
          if (data[i].cid == 6) {
            data[i].cid = "汉DM-i-尊容型";
          }
          if (data[i].cid == 7) {
            data[i].cid = "汉DM-i-尊享型";
          }
          if (data[i].cid == 8) {
            data[i].cid = "汉DM-i-旗舰型";
          }
          if (data[i].cid == 9) {
            data[i].cid = "汉EV 创世版-尊容型";
          }
          if (data[i].cid == 10) {
            data[i].cid = "汉EV 创世版-旗舰型";
          }
          if (data[i].cid == 11) {
            data[i].cid = "汉EV 创世版-四驱尊享型";
          }
          if (data[i].cid == 12) {
            data[i].cid = "唐EV-尊贵型";
          }
          if (data[i].cid == 13) {
            data[i].cid = "唐EV-尊享型";
          }
          if (data[i].cid == 14) {
            data[i].cid = "唐EV-四驱尊享型";
          }

          if (data[i].order_status == 0) {
            data[i].order_status = "已预约";
          }
          if (data[i].order_status == 1) {
            data[i].order_status = "预约成功";
          }
          if (data[i].order_status == 2) {
            data[i].order_status = "已完成";
          }
        }

        this.tableData = data;
      });
    },

    goFinish(index) {
      let time = new Date().getTime();
      if (
        this.data2[index].order_status == 1 &&
        time > this.data2[index].time
      ) {
        this.data2[index].order_status = 2;
        this.form = this.data2[index];
        this.axios
          .post("/update_order", qs.stringify(this.form))
          .then((res) => {});
        this.tableData[index].order_status = "已完成";
      } else {
        return;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
h2 {
  padding: 10px 0;
  text-align: left;
}

.el-table {
  box-shadow: 0px 0px 8px 4px #c0c4cc80;
  border-radius: 5px;
}
</style>
